<template>
  <div class="map-property-popup" v-show="visible">
    <div class="popup-header">
      <h3>属性信息</h3>
      <el-button 
        type="text" 
        icon="el-icon-close" 
        @click="handleClose"
        class="close-btn"
      ></el-button>
    </div>
    <div class="popup-content">
      <div class="property-list">
        <div 
          v-for="item in filteredProperties" 
          :key="item.key"
          class="property-item"
        >
          <div class="property-key">{{ item.label }}</div>
          <div class="property-value">{{ item.value }}</div>
        </div>
      </div>
      <!-- <div class="property-list">
        <div 
          v-for="(value, key) in properties" 
          :key="key"
          class="property-item"
        >
          <div class="property-key">{{ key }}</div>
          <div class="property-value">{{ value || '-' }}</div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'MapPropertyPopup',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    properties: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['close'],
  data() {
    return {
      fieldMap: {
        JZWBM: '建筑物编码',
        JZWMC: '建筑名称',
        QXMC: '区县名称',
        JGLX: '结构类型',
        JZDS: '建筑层数',
        JZND: '建筑年代',
        ZMJ: '总面积',
        ZTYT: '主体用途',
        LCYT_DS: '地上楼层用途',
        LCYT_DSArea: '地上楼层面积',
        LCYT_DX: '地下楼层用途',
        DZ: '地址',
      }
    }
  },
  computed: {
    filteredProperties() {
      const result = []
      for (const [key, label] of Object.entries(this.fieldMap)) {
        result.push({
          key,
          label,
          value: this.properties[key] || '-'
        })
      }
      return result
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.map-property-popup {
  position: fixed;
  //left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 400px;
  height: 100%;
  margin-top: 60px;
  // max-height: 70vh;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1100;
  overflow: hidden;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e8e8e8;
    background: #f8f9fa;
    
    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
    
    .close-btn {
      padding: 4px;
      font-size: 16px;
      color: #666;
      
      &:hover {
        color: #333;
      }
    }
  }
  
  .popup-content {
    // max-height: calc(70vh - 60px);
    height: 100%;
    overflow-y: auto;
   
    
    .property-list {
      padding: 16px 20px 100px 20px;
      // height: 100%;
      
      .property-item {
        display: flex;
        margin-bottom: 12px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .property-key {
          flex: 0 0 120px;
          font-weight: 500;
          color: #666;
          font-size: 14px;
          line-height: 1.4;
          padding-right: 12px;
          word-break: break-word;
        }
        
        .property-value {
          flex: 1;
          color: #333;
          font-size: 14px;
          line-height: 1.4;
          word-break: break-word;
        }
      }
    }
  }
}

// 滚动条样式
.popup-content::-webkit-scrollbar {
  width: 6px;
}

.popup-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.popup-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.popup-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style> 